<!--
 * @Description: 案例
 * @Author: Boide
 * @Date: 2022-02-18 11:10:44
 * @LastEditors: guiyi@hongyi.tech
 * @LastEditTime: 2022-02-21 13:25:22
-->
<template>
  <div>
    <el-tabs type="border-card" @tab-click="tabCut">
      <el-tab-pane label="第一轮评审">
        <first
          v-if="type === '第一轮评审'"
          @submitJudges="submitJudges"
          @distribution="distribution"
          :provinceList="provinceList"
        />
      </el-tab-pane>
      <el-tab-pane label="第二轮评审">
        <second v-if="type === '第二轮评审'" :provinceList="provinceList" />
      </el-tab-pane>
    </el-tabs>
    <submit-modal :dialogVisible="dialogVisible" @onOk="onModalOk" @onClose="onClose" />
    <distribution :dialogVisible="disVisible" @onOk="onDisOk" @onClose="onDisClose" />
  </div>
</template>

<script>
import first from './subpage/first.vue'
import second from './subpage/second.vue'

import submitModal from './submitModal/submitModal'
import distribution from './distribution/distribution.vue'
import { getProvinceList } from '@/api/skinDisease/rankstu/rankstuApis'

export default {
  name: 'collocate',
  components: {
    first,
    second,
    // formCom,
    submitModal,
    distribution
  },
  data() {
    return {
      dialogVisible: false,
      type: '第一轮评审',
      disVisible: false,
      provinceList: []
    }
  },
  mounted() {
    this.queryProvinces()
  },
  methods: {
    distribution() {
      this.disVisible = true
    },
    onDisOk() {
      this.disVisible = false
    },
    onDisClose() {
      this.disVisible = false
    },
    onModalOk() {
      this.dialogVisible = false
    },
    submitJudges() {
      this.dialogVisible = true
      console.log('submit')
    },
    onClose() {
      this.dialogVisible = false
    },
    tabCut(e) {
      this.type = e.label
    },
    queryProvinces() {
      getProvinceList({ id: 0 }).then(res => {
        this.provinceList = res.data
      })
    }
  }
}
</script>

<style scoped></style>
